---
name: useMap
rank: 28
tagline: Synchronize and update state based on the Map data structure with useMap.
sandboxId: usemap-ev8nd1
previewHeight: 300px
relatedHooks:
  - usequeue
  - useset
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useMap hook provides a wrapper around the JavaScript Map object and allows
  you to easily update and synchronize the map state with the component’s
  rendering. By using this hook, you can add, delete, or clear entries in the
  map while ensuring that the component re-renders whenever these operations are
  performed.
</HookDescription>

<div class="reference">
  ### Return Value

  <div class="table-container">
  | Name | Type       | Description                                            |
  | ---- | ---------- | ------------------------------------------------------ |
  | map  | map object | An instance of the `Map` object with enhanced methods. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useMap } from "@uidotdev/usehooks";

export default function App() {
  const map = useMap([
    ["Jazz", 32],
    ["Suns", 50],
  ]);

  return (
    <section>
      <h1>useMap</h1>
      <table>
        <thead>
          <tr>
            <th colSpan={4}>Jazz vs Suns</th>
          </tr>
        </thead>
        <tbody>
          {Array.from(map.keys()).map((team) => {
            const score = map.get(team);
            return (
              <tr key={team}>
                <th style={{ width: "25%" }}>{team}</th>
                <td style={{ width: "50%" }}>{score}</td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 2);
                    }}
                  >
                    + 2
                  </button>
                </td>
                <td style={{ width: "12.5%" }}>
                  <button
                    className="link"
                    onClick={() => {
                      map.set(team, score + 3);
                    }}
                  >
                    + 3
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}
```

</StaticCodeContainer>
